<template>
	<view>
		<slot name="custom"></slot>
		<view v-if="!isSlot" class="grid grid-cols-3 gap-3">
			<view v-for="(item,index) in fileList" :key="index" class="relative text-center rounded upload_item">
				<template v-if="accept == 'image'">
					<image class="w-full h-full rounded-lg" :src="item.url"></image>
				</template>
				<template v-else>
					<u-icon :name="accept == 'video'? 'play-right-fill':'file-text-fill'" size="20"></u-icon>
					<view class="text-gray-99 text-sm zx-ellipsis" v-text="item.name"></view>
				</template>
				<view class="absolute top-1_5 right-1_5" @click.stop="clearFiles(index)">
					<u-icon name="close-circle-fill" size="20"></u-icon>
				</view>
			</view>
			<view v-if="fileList.length == 0 || maxCount > 1" class="flex items-center justify-center text-center rounded upload_item" @click="pickFile">
				<i class="iconfont icon-tianjia text-3xl text-gray-99"></i>
			</view>
		</view>
		<uni-file-picker ref="filePicker" v-model="fileList" :auto-upload="false" :fileMediatype="accept" :file-extname="extname" 
			:limit="maxCount" :list-styles="listStyles" :image-styles="imageStyles" :mode="accept == 'image'? 'grid':'list'" 
			@select="select"></uni-file-picker>
	</view>
</template>

<script>
	import * as uploadApi from '@/interface/common/upload.js'
	import UniFilePicker from '@/components/uni_file_picker/uni-file-picker'
	export default {
		components: {UniFilePicker},
		props: {
			value: {type: Array},
			accept: {
				type: String,
				// image/video/all(文件)
				default: 'image'
			},
			// 文件后缀
			extname: {
				type: Array,
				default: []
			},
			maxCount: {
				type: Number,
				default: 1
			},
			maxSize: {// 传入Mb
				type: Number,
				default: -1
			},
			isSlot: {
				type: Boolean,
				default: false
			}
		},
		data() {
			const v = this
			return {
				fileList: [],
				originFileList: [],// app的文件删除操作会变更原数组结构（没有了id）
				listStyles: {width: '0px', height: '0px'},
				imageStyles: {width: '0px', height: '0px'}
			}
		},
		watch: {
			value: {
				handler() {
					this.fileList = this.value
					this.originFileList = this.value
				},
				deep: true
			}
		},
		methods: {
			pickFile () {
				if (this.maxCount == this.fileList.length) {
					uni.$u.toast("您最多选择" + this.maxCount + "个文件");
					return
				}
				this.$refs.filePicker.choose()
			},
			select (data) {
				const {tempFiles,tempFilePaths} = data
				// if (this.maxCount < (this.fileList.length + tempFiles.length)) {
				// 	uni.$u.toast("您最多选择" + this.maxCount + "个文件");
				// 	return
				// }
				if (this.maxCount > -1) {
					let bigFiles = tempFiles.filter(file=>file.size > (this.maxCount * 1024 * 1024))
					if (bigFiles.length > 0) {
						uni.$u.toast(bigFiles.length +" 个文件过大,不能超过 " + this.maxCount + "M")
						return
					}
				}
				let newFiles = tempFiles.map(item=> ({name: item.name,url: item.url,fileType: item.fileType}))
				this.fileList = this.fileList.concat(newFiles)
				this.originFileList = this.originFileList.concat(newFiles)
				this.$emit("input", this.originFileList)
			},
			clearFiles (index) {
				const v = this
				if (index || index == 0) {
					v.originFileList.splice(index, 1)
				}else {// 不传表示全部删除
					v.originFileList = []
				}
				v.$emit("input", v.originFileList)
				v.$refs.filePicker.clearFiles(index)
			},
		}
	}
</script>

<style>
	.upload_item {
		height: 90px;
		line-height: 90px;
		background-color: #f4f5f7;
	}
</style>
